<script>
// import {httpBaseUrl} from "@/util/globa";
import env from "@/api/env"

export default {
  name: 'FileUpload',
  data() {
    return {
      activeUrl: env.dev.baseURL + '/reportApproval/report/fileUplod'
    }
  },
  methods: {
    getToken() {
      return `Bearer ${sessionStorage.getItem('token')}`;
    },
    handleAvatarSuccess(res) {
      this.$emit("change", res.data);
    },
    beforeAvatarUpload(file) {
      const isImage = file.type.concat('image');
      if (!isImage) {
        this.$message.error('上传文件只能是图片!');
      }
    }
  },
  props: {
    value: {
      type: String,
      default: null
    },
    uploadUrl: {
      type: String,
      default: null
    }
  }
}
</script>

<template>
  <el-upload
      class="avatar-uploader"
      style="border: 1px solid #d9d9d9; width: 140px; height: 140px"
      :style="{'border': !value ? '1px solid #d9d9d9' :''}"
      :action="uploadUrl ? uploadUrl : activeUrl"
      :headers="{'Authorization': getToken()}"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
    <img v-if="value" :src="value" class="avatar" style="max-height: 140px; max-width: 140px;">
    <i v-else class="el-icon-plus avatar-uploader-icon" style="margin-left: 60px; margin-top: 60px;"></i>
  </el-upload>
</template>

<style scoped>

</style>